<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>A Demo Example for SDK Chart With Default UI  </title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="../../../common/reset.css" type="text/css" rel="stylesheet"/>
		<link href="../../../common/common.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/tabmenu/tabmenu.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/selectbutton/selectbutton.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/dropdownlist/dropdownlist.css" type="text/css" rel="stylesheet"/>
		<link href="../../../ui/slider/slider.css" type="text/css" rel="stylesheet"/>
		<link href="../../../widgets/autocomplete/autocomplete.css" type="text/css" rel="stylesheet"/>
		<link href="../../../widgets/chart/chart.css" type="text/css" rel="stylesheet"/>		
		<link href="../../../theme/default/style.css" type="text/css" rel="stylesheet"/>  
		<style>
		.sdk-chart-out-container{width:800px;}
		</style>
    </head>
    <body style="overflow: auto; padding: 0; margin: 0">
	<div class="sdk-chart-out-container"> 
		<div class="sdk-chart-tool">
		</div> 
		<div class="sdk-chart-container" id = "sdk-chart">
		</div>
	</div>
	<script src="../../../lib/jquery.js" type="text/javascript"></script>
	<script src="../../../lib/jquery.mousewheel.js" type="text/javascript"></script>
	<script src="../../../lib/jquery.json.min.js" type="text/javascript"></script>
	<script src="../../../core/common.js" type="text/javascript" ></script>
	<script src="../../../core/permissionChecker.js" type="text/javascript" ></script>
	<script src="../../../core/tickers.js" type="text/javascript" ></script>
	<script src="../../../core/subscriber.js" type="text/javascript"></script>
	<script src="../../../core/dataHandler.js" type="text/javascript"></script>
	<script src="../../../core/pull.js" type="text/javascript"></script>
	<script src="../../../core/push.js" type="text/javascript"></script>
	<script src="../../../core/SDKDataManager.js" type="text/javascript"></script>
	<!--[if lte IE 8]><script type="text/javascript" src="../../../excanvas.min.js"></script><![endif]-->
	<script src="../../../ui/util/util.js" type="text/javascript"></script>
	<script src="../../../ui/tabmenu/tabmenu.js" type="text/javascript"></script>
	<script src="../../../ui/selectbutton/selectbutton.js" type="text/javascript"></script>
	<script src="../../../ui/dropdownlist/dropdownlist.js" type="text/javascript"></script>
	<script src="../../../ui/slider/slider.js" type="text/javascript"></script>
	<script src="../../../widgets/autocomplete/autocomplete.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/simpleAutoCompleteBox.js" type="text/javascript"></script>
	<script src="../../../language/en_us/qs_chart_en_us.js" type="text/javascript"></script>
	<script src="../../../formatter/qs_formatter_en_us.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartUI.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartDraw.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartUtil.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/indicatorCalculation.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/chartDataManager.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/baseChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/stockChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/fundChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/forexChart.js" type="text/javascript"></script>
	<script src="../../../widgets/chart/mstar.flot.js" type="text/javascript"></script>
	
	<script>
		var chartWidget = new QSAPI.Widget.Chart.Stock("MSFT", "USA", "en_us");		
	   
		 // initilaze the data manager
		QSAPI.init("DISN");
		 // initilaze the chart 
        var prefix = "//qsstage.morningstar.com/"
        QSAPI.DataManager.Chart.dataUrls.intraday = prefix+"quote.jsp?";
        QSAPI.DataManager.Chart.dataUrls.historical = prefix+"getStockHistoricalData.jsp?";
        QSAPI.DataManager.Chart.dataUrls.fundamental = prefix+"getFundamentalData.jsp?";
        QSAPI.DataManager.Chart.dataUrls.minutelyIntraday = prefix+"getMinutelyIntradayData.jsp?";
		QSAPI.DataManager.Chart.dataUrls.fundHistorical=prefix+"getFundChartData.jsp?";
		QSAPI.DataManager.Chart.dataUrls.exportDataToExcel=prefix+"exportChartDataToExcel.jsp?";
        QSAPI.DataManager.Chart.dataUrls.forex = prefix+"getForexHistoricalData.jsp?";
		QSAPI.DataManager.Chart.crossDomain = true;
        //chartWidget.id = "sdk-chart";

		QSAPI.Authentication.login("511F1BFFABACF2797D53014B7B7EF29F502E7015781E8D93A04989A70197E422B9AC0FE2E59882CDC9713E118EEA680F7F0E859C73FBD6BEF64C7DD04490EF1A","62D2A0641B01FBF65FA127365CDC0DC427458A67D958FC979718FF067CCD1A8D8D4E839255D60957C1A502D25C724A1D65F6EEE07636A0AA84E8F51C8D1831EE",{   // login in to QS web server to get the data permission
			onSuccess:function(result){
			   // initilaze the autocomplete object.
				
				QSAPI.DataManager.Chart.dataSourceType = "pull"
				QSAPI.DataManager.connectToPull("http://qsstage.morningstar.com/pullservice/pull/getPullQuote.jsp",5000,{
					onSuccess:function(result){
						chartWidget.init("sdk-chart",{width:870,height:360},{container:$(".sdk-chart-tool"),config:{autoCompleteBox:true}});
					}
				}) // push or pull.
			},
			onFailure:function(result){
			}
		});
	 
	</script>
            
    </body>
</html>
